<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回答调查问卷</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/layui.css">
</head>

<body style="background-image: url(img/2.jpg);;background-size: cover;">
  <div class="container">
    <div class="row align-items-start">
      <div class="col">
      </div>
      <div class="col">

      </div>
    </div>
    <div class="col">

    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">

    </div>
    <div class="col" style="opacity: 0.7;">
      <div class="shadow p-3 mb-5 bg-white rounded">
        <div class="">
          <div class="card-body">
            <div style="text-align: center;">

              {% for msg in msgs %}
              <div>
                <br>
                <h3>问题：{{msg.question}}
                  <br>
                  评分：<select name="electronicId">
                    <option disabled>（0~10分）</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
                </h3>
                <br>
              </div>
              {% endfor %}


              <p style="float: right;">
                <button type="button" class="layui-btn" onclick="addtj()">保存</button>
                <button type="button" class="layui-btn" onclick="cancel()">取消</button>
              </p>
              <br>
              <br>
              <br>

            </div>


          </div>
        </div>
      </div>


    </div>
    <div class="col">

    </div>
  </div>

  <div class="row align-items-end">
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
  </div>
  </div>



  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="js/layui.js"></script>
  <script>
    //取消
    function cancel() {
      window.location.href = '/'
    }

    function addtj() {
      var electronicIds = [];
      $("select[name='electronicId']").each(function (j, item) {
        electronicIds.push(document.getElementsByTagName("select")[j].value);
      });
      //console.log(electronicIds);

      axios({
        method: 'post',
        url: '/submitscore',
        data: {
          electronicIds: electronicIds
        }
      }).then(function (response) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        let res = response.data;
        if (res.code === 200) {
          alert("评分成功");
          window.location.href = '/';
        }else {
            alert(res.msg);
          }
        }).catch((err) => {
          alert(err)
        });

      } 
     



    
  </script>